<script lang="ts" setup>
import type { VerticalNavigationLink } from "#ui/types";

const userStore = useMyUserStore();

const userPreset: Ref<VerticalNavigationLink[][]> = ref([
  userStore.isLogin
    ? [
        {
          label: "我的主页",
          icon: "i-heroicons-home",
          activeClass: tw`bg-cool-100 dark:bg-slate-700`.join(" "),
          click: () => {
            navigateTo("/user");
          },
        },
        {
          label: "管理资源",
          icon: "i-heroicons:squares-plus",
          click: () => {
            navigateTo("/hyper-visitor");
          },
        },
        {
          label: "添加视频资源",
          icon: "i-heroicons:clipboard-document-list",
          click: () => {
            navigateTo("/hyper-visitor/video");
          },
        },
        {
          label: "添加测试资源",
          icon: "i-heroicons:clipboard-document-list",
          click: () => {
            navigateTo("/hyper-visitor/exam");
          },
        },
        {
          label: "退出登录",
          icon: "i-ph:arrow-square-up-right",
          click: () => {
            userStore.logout();
            navigateTo("/login");
          },
        },
      ]
    : [],
  [
    {
      label: "反馈问题",
      icon: "i-heroicons-light-bulb",
    },
    {
      label: "寻求帮助",
      icon: "i-heroicons-question-mark-circle",
    },
  ],
]);
</script>

<template>
  <!-- TODO: 未登录和登录 -->
  <ClientOnly>
    <UPopover mode="hover" class="z-20 cursor-pointer group/login2">
      <UAvatar
        v-if="userStore.isLogin"
        src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_1280.png"
        alt="Avatar"
        class="dark:nuxt-theme dark:text-gray-800 dark:hover:nuxt-theme rubber-animation-bigger"
      />
      <UButton
        v-else
        class="m-2 rounded-md dark:text-gray-800 font-[400] group-hover/login2:scale-110 transition-transform"
      >
        <RouterLink to="/login">
          登录
        </RouterLink>
      </UButton>

      <template #panel>
        <UVerticalNavigation :links="userPreset" />
      </template>
    </UPopover>
    <UTooltip class="z-20 cursor-pointer" text="暂无信息">
      <UButton
        icon="i-heroicons-chat-bubble-oval-left"
        color="gray"
        class="rubber-animation"
      />
    </UTooltip>
    <template #fallback>
      <FallBack />
    </template>
  </ClientOnly>
  |
  <!-- <div v-if="userStore.isLogin"> --><!-- 创建时访问pinia 导致水和错误的警告 -->

  <!-- </div> -->
</template>

<style></style>
